<html>
<head>
    <title>Title</title>
</head>
<body>

<h1>学生修改信息页面</h1>

<form id="stuInfoForm" method="post" enctype="multipart/form-data">

    <input type="hidden" name="username"/>

    账号：<span id="username"></span><br/>
    姓名：<input type="text" name="name" /><br/>
    年龄：<input type="text" name="age" /><br/>
    性别：
    <input type="radio" name="sex" value="man" />男
    <input type="radio" name="sex" value="woman" />女
    <br/>
    爱好：
    <input type="checkbox" name="hobbies" value="football"/>足球
    <input type="checkbox" name="hobbies" value="basketball" />篮球
    <input type="checkbox" name="hobbies" value="shop" />购物
    <br/>
    上传头像：<input type="file" name="photo"/><br/>

    <input type="submit" value="修改"/>
    <input type="button" value="返回" onclick="goIndex()"/>
</form>

<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    // 获取 URL 中的 username 参数
    const urlParams = new URLSearchParams(window.location.search);
    const username = urlParams.get('username');

    $(document).ready(function () {
        //  AJAX 请求获取学生信息
        $.ajax({
            url: "student?action=doInitModify&username="+username,
            method: 'GET',
            dataType: 'json',
            success: function (response) {
                console.log('AJAX请求成功:', response);
                // 将学生信息填充到表单中
                $("#username").text(response.username);
                $("#stuInfoForm input[name='username']").val(response.username);
                $("#stuInfoForm input[name='name']").val(response.name);
                $("#stuInfoForm input[name='age']").val(response.age);
                $("#stuInfoForm input[name='sex'][value='"+response.sex+"']").prop('checked', true);//prop() 方法设置或返回被选元素的属性值。
                let hobbies = response.hobbies;
                $("input[name='hobbies']").each(function () {
                    let hobbyValue = $(this).val();
                    if (hobbies.includes(hobbyValue)) {
                        $(this).prop('checked', true);
                    } else {
                        $(this).prop('checked', false);
                    }
                });
            },
            error: function (xhr, status, error) {
                console.log('AJAX请求失败:', error);
            }
        });
    });

    $("#stuInfoForm").submit(function (event) {
        event.preventDefault();
        // 创建 FormData 对象
        let formData = new FormData(this);
        // 发送 AJAX 请求
        $.ajax({
            url: "student?action=doModify",
            type: 'POST',
            data: formData,
            async:true,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function (response) {
                console.log('AJAX请求成功:', response);
                if (response == "1") {
                    alert("修改成功！");
                } else {
                    alert("修改失败！");
                }
                window.location = "stuList.html";
            },
            error: function (xhr, status, error) {
                console.log('AJAX请求失败:', error);
                alert("修改失败！");
            }
        });
    });

    function goIndex(){
        var role = '${requestScope.role}';
        if(role == 'student'){
            window.location = "index.html";
        }else {
            window.location = "stuList.html";
        }
    }
</script>
</body>
</html>

